<template>
  <div class="wrap">
    
    <van-tabbar active-color="#181818" inactive-color="#282828" @change="onChange">
      <keep-alive>
      <van-tabbar-item replace to="/">
        <span>首页</span>
        <img
          :src="activeIndex==0 ? icon.active1 : icon.inactive12"
        />
        
      </van-tabbar-item>
      </keep-alive>
      <van-tabbar-item replace to="/pages/forumIndex">
        <span>论坛</span>
        <img
          :src="activeIndex==1 ? icon.active2 : icon.inactive22"
        />
      </van-tabbar-item>
      <van-tabbar-item replace to="/pages/personalCenter">
        <span>我的</span>
        <img
          :src="activeIndex==2 ? icon.active3 : icon.inactive32"
        />
      </van-tabbar-item>
    </van-tabbar>
    
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  name: "App",
  data() {
    return {
      activeIndex: 0,
      icon: {
        active1: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar1.2.png",
        inactive12: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar1.1.png",
        active2: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar2.2.png",
        inactive22: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar2.1.png",
        active3: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar3.2.png",
        inactive32: "http://service.shenyuwenhuachuanbo.com:31096/upload/tabbar3.1.png",
      },
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
     onChange(index) {
      console.log('index',index)
      if(index==1||index==2){
          this.activeIndex = index
      }else{
        this.activeIndex = 0
      }
      console.log('activeIndex',this.activeIndex)
      // Notify({ type: 'primary', message: index });
    },
  },
  created() {},
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
};
</script>

<style scoped></style>
